<script lang="ts" setup>
import { Snackbar } from '@varlet/ui'
import router from '../../router'
import { ref } from 'vue'

const active = ref(0)
const goBack = () => {
    router.push('/wode')
  Snackbar({
    // content: '返回',
    position: 'top'
  })
};
</script>
<template>
<var-app-bar title="发票助手" text-color="black" color="#fff" style="margin-bottom:10px;font-weight: bold;">
    <template #left>
        <var-button
            round
            text
            color="transparent"
            text-color="black"
            @click="goBack"
        >
            <var-icon name="chevron-left" :size="24" />
        </var-button>
    </template>
</var-app-bar>
    <var-tabs v-model:active="active">
        <var-tab>我的发票抬头</var-tab>
        <var-tab>我的发票</var-tab>
    </var-tabs>
    <var-tabs-items v-model:active="active">
    <var-tab-item>
      <div style="padding:20px 10px;border-bottom:1px solid #f4f4f4;font-size: 18px;">
        <span>+</span>
        <span style="margin-left:10px;">添加抬头</span>
      </div>
    </var-tab-item>
    <var-tab-item>
      <div style="padding:10px;background:#f0f0f0;">
        <div style="background:#fff6dd;color:#fcbd56;padding:10px;font-weight: bold;border-radius: 10px;">
            当前仅收录美团发票合作商家开具的电子发票
        </div>
      </div>
    </var-tab-item>
  </var-tabs-items>
</template>
<style lang="scss" scoped>
.var-elevation--3{
  box-shadow: none !important;
}
</style>